import axios from 'axios'
import abc from '@/store' // 默认会找文件夹里面的index.xxx
import store from '@/store'
import router from '@/router'

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  // baseURL: '/prod-api',  后端看到数据  技术的T 上限 公司里面 后端高  CTO  管理岗 M
  // baseURL: '/api',
  // baseURL: '/yufa-api',
  timeout: 5000
})

// 添加请求拦截器 --- 所有请求发出去之前，都会先执行请求拦截器里面的回调函数，2个回调函数
service.interceptors.request.use(function(config) {
  // vue组件里面才能使用 this.$store
  // console.log(abc.state.user.token)
  // 如果不知道config怎么添加请求头， 去百度  axios 拦截器 添加 token
  // Authorization 这个字符串不是固定的，后端要什么，我们穿什么
  config.headers['Authorization'] = `Bearer ${abc.state.user.token}`
  // config.headers['TESTAAA'] = `Bearer ${abc.state.user.token}`
  return config
}, function(error) {
  return Promise.reject(error)
})

// 添加响应拦截器 ---- 所有返回之前，都会先执行响应拦截器里面的回调函数， 2个回调函数
service.interceptors.response.use(function(response) {
  // http 状态码 200
  // return response
  // 在把服务的数据 返回给前端 业务代码的时候 先把数据过滤一遍，我们只需要response对象里面的额data属性
  // return response.data
  // if (response.data.success) {
  //   return response.data
  // } else {
  //   // 向后端的请求是成功的（HTTP状态码是200），但是业务代码是错误，比如账号密码输入错误
  //   // console.log('请求失败：', response.data.message)
  //   // return Promise.reject(new Error(response.data.message))
  //   // return null  就是请求失败的时候给前端传递的值
  //   // return response  什么都不该，直接返回response 也行
  //   // 以前不写这个业务代码失败，是想着将所有错误统一处理
  //   // message.error('请求失败')
  //   return response.data
  // }
  return response.data
}, function(error) {
  // http的状态码是 4xx 5xx
  // Promise.resolve()  Promise.reject()
  // console.log('请求401进来没有，请求出错了', error)
  // 如果请求失败： token失效的原因， 对用户做退出的操作，清空他的toekn，userInfo等信息，然后强行退出到登录页面
  console.dir(error)
  if (error.response?.data?.code === 10002) {
    // 在这个if条件里面， 我们的token失效了
    // 做的操作，和退出一模一样
    store.dispatch('user/logout')
    router.push('/login') // 修改vuex里面的toekn值， 然后切换其他路由去查看效果，因为路由守卫里面会发请求
  }
  return Promise.reject(error)
})

// 工作里面的 拦截器不是手动写出来 ，都是官网复制
export default service
